<template>
  <header @mouseleave="isShow = false">
    <!-- 这是顶部导航栏 -->
    <div class="header-main">
      <!-- 导航栏的左边 -->
      <div class="header-main-left">
        <h1 class="logo">
          <img src="../../assets/img/xiaoheizi.jpeg" />
          <span>好 课 网</span>
          <span class="hkw">HaoKeWang</span>
        </h1>

        <ul>
          <li
            v-for="item in topBar"
            :key="item.id"
            :class="item.id == courseId ? 'active' : ''"
            @click="tabBar(item)"
          >
            {{ item.title }}
          </li>
          <!-- <li class="active">首 页</li>
          <li @click="kecheng">课 程</li>
          <li>会 员</li> -->
        </ul>
      </div>
      <!-- 导航栏的右边 -->
      <div class="header-main-right">
        <div class="search">
          <input type="" name="" placeholder="搜索想要的课程" />

          <el-icon :size="20"><Search /></el-icon>
        </div>
        <div class="shop">
          <el-icon :size="23" @click="goGart"><ShoppingCart /></el-icon>
        </div>
        <div class="login" v-if="!isLogin">
          <!-- <router-link to="/login">登录/注册</router-link> -->
          <router-link to="/login">登录/注册</router-link>
        </div>
        <div class="content-login-success" v-else>
          <div style="cursor: pointer">我的课程</div>
          <div @mouseenter="isShow = true">
            <img
              class="avator"
              :src="userInfo.avatar"
              alt=""
              v-if="userInfo.avatar"
            />
            <img v-else class="avator" src="../../assets/img/Avat62.png" />
          </div>
          <!-- 划过头像显示  -->
          <div class="user-info" v-if="isShow">
            <div class="user-info-top">
              <div class="u-i-t-top">
                <img
                  class="avator"
                  :src="userInfo.avatar"
                  alt=""
                  v-if="userInfo.avatar"
                />
                <img class="avator" src="../../assets/img/Avat62.png" v-else />
                <div class="avator-info">
                  <p>{{ userInfo.nickName }}</p>
                </div>
                <div class="vip" v-if="vipInfo">
                  <div class="vipImg">
                    <img
                      :src="vipInfo.vipIcon"
                      :class="endTimeVip < 0 ? 'gray' : ''"
                    />
                  </div>
                  <div class="vipName">{{ vipInfo.vipName }}</div>
                  <div class="endTime" v-if="vipInfo.isExpired === 0">
                    {{ endTimeVip }}天到期
                  </div>
                  <div class="endTime" v-else>
                    已过期{{ Math.abs(endTimeVip) }}天
                  </div>
                </div>
              </div>
              <div class="u-i-i-bottom">
                <div>
                  <router-link to="/">
                    <div class="info-item">
                      <img src="../../assets/img/course.png" />
                      <p>我的课程</p>
                    </div>
                  </router-link>
                </div>
                <div>
                  <router-link to="/">
                    <div class="info-item">
                      <img src="../../assets/img/order.png" />
                      <p>订单中心</p>
                    </div>
                  </router-link>
                </div>
                <div>
                  <router-link to="/">
                    <div class="info-item">
                      <img src="../../assets/img/mess.png" />
                      <p>我的消息</p>
                    </div>
                  </router-link>
                </div>
                <div>
                  <router-link to="/">
                    <div class="info-item">
                      <img src="../../assets/img/setting.png" />
                      <p>个人设置</p>
                    </div>
                  </router-link>
                </div>
              </div>
            </div>
            <div class="user-info-bottom">
              <div class="logout" @click="outLogin">退出登录</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
</template>
<script setup>
// let router = useRouter();
import { Search, ShoppingCart } from "@element-plus/icons-vue";
import { onBeforeMount, watch } from "@vue/runtime-core";
//路由
// let router = useRouter();
// api
import { createToken } from "../../utils/api/createToken";
import { getInfo, logout } from "../../utils/api/Login";

// store
//store
import { useUserStore } from "../../store/user";
// 用户是否为登录状态
let isLogin = ref(false);
//用户信息
let userInfo = ref({});
//用户vip数据
let vipInfo = ref({});
//VIP到期时间
let endTimeVip = ref();
//显示用户更多数据
let isShow = ref(false);

onBeforeMount(() => {
  createToken().then((res) => {
    let token = res.data.token;
    getInfo({
      token,
    }).then((res) => {
      // 登录的状态，获取到用户的信息
      if (res.meta.code == "200") {
        // 用户信息
        userInfo.value = res.data.data;
        //用户vip
        vipInfo.value = res.data.data.vipInfo;
        // 计算会员到期时间
        let now = new Date().getTime();
        let endTime = vipInfo.value.endTime - now;
        endTimeVip.value = Math.floor(endTime / 1000 / 60 / 60 / 24);
        // console.log(now);
        // 判读是否可以获取用户信息
        isLogin.value = true;
      }
    });
  });
});
//路由
let router = useRouter();
// 数据跳转
let topBar = ref([
  { id: 1, title: "首 页", name: "Home" },
  { id: 2, title: "课 程", name: "Course" },
  { id: 3, title: "会 员", name: "Vip" },
]);
//默认选中//切换头部class类
let courseId = ref(1);
// 点击跳转
const tabBar = (item) => {
  courseId.value = item.id;
  router.push({
    name: item.name,
  });
};

// 监听路由的变化
watch(
  () => router.currentRoute.value.name,
  (toPath) => {
    if (toPath == "Home") {
      courseId.value = 1;
    } else if (toPath == "Course") {
      courseId.value = 2;
    } else if (toPath == "Vip") {
      courseId.value = 3;
    }
  },
  {
    immediate: true,
  }
);
// console.log(router);
//element-plus
import { ElMessageBox } from "element-plus";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { storeToRefs } from "pinia";
//退出登录
const outLogin = () => {
  ElMessageBox.confirm("确定退出登录吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      logout().then((res) => {
        if (res.meta.code == "200") {
          ElMessage.success({
            message: "退出成功!",
          });
          //清除token
          let useStore = useUserStore();
          useStore.clearToken();
          //刷新页面
          router.go(0);
        }
      });
    })
    .catch(() => {
      ElMessage.info({
        message: "已取消",
      });
    });
};
// 进入购物车
const goGart = () => {
  router.push("/cart");
};
</script>

<style lang="scss" scoped>
@import "../../assets/CSS/function.scss";
header {
  @include wh(100%, 80px);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.16);
  z-index: 999;
  position: relative;
}
.header-main {
  @include wh(1100px, 80px);
  margin: 0 auto;

  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo {
  @include wh(200px, 80px);
  padding-right: 51px;
  display: flex;
  text-align: center;
  // justify-content: space-around;
}
.logo img {
  @include wh(100%, 100%);
}
.logo span {
  display: block;
  width: 156px;
  font-size: 24px;
  line-height: 80px;
  // font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
  font-family: "STXinwei", Courier, monospace;
  user-select: none;
}
.logo .hkw {
  // float: left;
  position: absolute;
  font-size: 15px;
  left: 22.2%;
  top: 31%;
  font-weight: 100;
}
.header-main-left {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-main-left ul {
  display: flex;
  line-height: 40px;
}
.header-main-left ul li {
  height: 40px;
  cursor: pointer;
}
.header-main-left ul li + li {
  margin-left: 79px;
  font-size: 16px;
  color: #808080;
  user-select: none;
}
.active {
  position: relative;
  font-weight: 900;
  color: #3585ff;
}
.active::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 0;
  width: 150%;
  margin-left: -20%;
  height: 3px;

  background: #3585ff;
}
.header-main-right {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.header-main-right .search {
  width: 300px;
  height: 43px;
  padding: 0 10px;
  background-color: #f0f2f4;
  border-radius: 5px;
  display: flex;
  align-items: center;
}
.header-main-right .search input {
  width: 270px;
  height: 43px;
  border: none;
  background-color: transparent;
}
.header-main-right .shop {
  margin-left: 42px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.header-main-right .login {
  margin-left: 39px;
  font-size: 16px;
  color: #808080;
}
.header-main-right .login a {
  color: skyblue;
  text-decoration: none;
}
.content-login-success {
  height: 53px;
  color: #808080;
  text-align: center;
  width: 180px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  margin-left: 10px;
  color: #707070;
}
.avator {
  height: 53px;
  width: 53px;
  cursor: pointer;
  border-radius: 50%;
}
.user-info {
  width: 200px;
  height: 194px;
  background-color: #fff;
  border: 1px solid rgba(248, 250, 252, 1);
  box-shadow: 0px 5px 15px 3px #888888;
  position: absolute;
  top: 75px;
  // left: 20pxs;
  right: 210px;
  z-index: 999;
  display: block;
  border-radius: 10px;
}
.user-info-top {
  display: flex;
  width: 100%;
  height: 160px;
  border-bottom: 1px solid rgba(248, 250, 252, 1);
  flex-direction: column;
}
.u-i-t-top {
  display: flex;
  height: 80px;
  width: 100%;
  align-items: center;
}
.u-i-t-top img {
  width: 40px;
  height: 40px;
  margin: 0 10px;
  cursor: pointer;
}
.avator-info {
  width: 120px;
  height: 60px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  display: flex;
  flex-direction: column;
  /*align-items: center;*/
}
/*有会员了之后高度微调*/
.avator-info p {
  height: 40px;
  line-height: 40px;
  cursor: pointer;
}
.u-i-i-bottom {
  display: flex;
  height: 100px;
  width: 200px;
  margin-top: 10px;
  flex-wrap: wrap;
  justify-content: space-around;
}
.u-i-i-bottom a {
  text-decoration: none;
}
.info-item {
  width: 90px;
  height: 30px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  border-radius: 3px;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.1) !important;
}
.info-item img {
  width: 14px;
  height: 16px;
}
.user-info-bottom {
  position: relative;
  width: 100%;
  height: 30px;
}
.logout {
  line-height: 30px;
  position: absolute;
  top: 0;
  right: 10px;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #93999f;
  cursor: pointer;
}
/*vip开始*/
.vip {
  display: flex;
  flex-direction: row;
  /*flex-wrap: wrap;*/
  width: 100%;
  height: 30px;
  margin-left: -105px;
  margin-top: 18px;
  font-size: 12px;
  line-height: 30px;
}
.vipImg {
  width: 15px;
  height: 15px;
  margin-right: 12px;
}
.vipImg img {
  width: 100% !important;
  height: 100% !important;
}
.vipName {
  color: #93999f;
}
.endTime {
  padding-left: 2px;
  color: #ff0000;
  position: absolute;
  top: 45px;
  left: 73px;
  font-size: 12px;
}
</style>
